<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绑定样式</title>
  <script src="../../js/vue.js"></script>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .zyj1{
      background-color: yellowgreen;
    }
    .zyj2{
      font-size: 30px;
      text-shadow:2px 2px 10px red;
    }
    .zyj3{
      border-radius: 20px;
    }
  </style>


</head>
<body>
<div id="root">

  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  <div class="basic" :class="classObj">{{name}}</div> <br/><br/>
</div>

<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el:'#root',

    data:{
      name:'曾宇杰',
      classObj:{  //定义一个类选择器对象
        zyj1:false,  //样式名:是否生效
        zyj2:true,
      }

    },
  })
</script>


</body>
</html>